<template>
  <div class="app-container">

    <!-- 表格 -->
    <el-table v-loading="loading" :data="list" border>
      <el-table-column
        label="ID"
        prop="id"
        align="center"
        width="80"
      />

      <el-table-column
        label="用户ID"
        prop="userId"
        align="center"
        width="100"
      />

      <el-table-column
        label="手机号"
        prop="phone"
        align="center"
        width="120"
      />

      <el-table-column
        label="内容"
        prop="content"
        align="center"
      />

      <el-table-column
        label="场景"
        prop="scene"
        align="center"
        width="120"
      />

      <el-table-column
        label="失败原因"
        prop="note"
        align="center"
        width="150"
      />

      <el-table-column label="发送状态" prop="status" align="center" width="100">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.status === 1">成功</el-tag>
          <el-tag type="danger" v-else>失败</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="创建时间"
        prop="createDatetime"
        align="center"
        width="180"
      />

      <el-table-column
        label="更新时间"
        prop="updateDatetime"
        align="center"
        width="180"
      />

    </el-table>

    <!-- 分页 -->
    <pagination
      v-if="total > 0"
      :total="total"
      v-model:page="queryParams.page"
      v-model:limit="queryParams.size"
      @pagination="getList"
    />

  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getsms } from "@/api/system/sms";

const loading = ref(false);
const total = ref(0);
const list = ref([]);

const queryParams = reactive({
  page: 1,
  size: 10,
  telephone: "",
  userId: -1,
});

onMounted(() => {
  getList();
});

async function getList() {
  loading.value = true;
  try {
    const res = await getsms({
      page: queryParams.page,
      size: queryParams.size,
      telephone: queryParams.telephone,
      userId: queryParams.userId,
    });

    if (res.code === 0 || res.code === 200) {
      list.value = res.data.records || [];
      total.value = Number(res.data.total) || 0;
    }
  } finally {
    loading.value = false;
  }
}


</script>
